<template>
  <v-main class="full-height">
    <v-app-bar
        flat
        fixed
        align="center"
        height="60px"
    >
      <v-container class="full-width">
        <v-row justify="center" class="py-0" >
          <v-col class="text-left px-0 mr-n6">
            <v-btn icon @click="$router.back()" class="ml-n3" >
              <v-icon color="lighten-1" >mdi-arrow-left</v-icon>
            </v-btn>
          </v-col>
          <v-col cols="9" class="px-0">
            <v-text-field
                :placeholder="recommendKeyword || keyword"
                rounded
                background-color="grey lighten-2"
                v-model="keyword"
                class="mt-2 mb-n3"
            ></v-text-field>
          </v-col>
          <v-col class="text-right px-0 ml-n6">
            <v-btn icon  class="mr-n3" @click="doSearch()">
              <v-icon color="lighten-1">mdi-magnify</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-app-bar>

    <v-container class="pt-15">
      <!--      热门搜索部分-->
      <v-row class="mt-1">
        <v-col cols="auto">
          <v-icon color="red" size="20">mdi-fire</v-icon>
          <span class="text-subtitle-2">热门搜索</span>
        </v-col>
      </v-row>
      <v-row justify="start">
        <v-col cols="auto" class="pt-0 pr-0" v-for="item in hotSearchTags" :key="item">
          <v-chip small @click="searchContent(item)">
            {{item}}
          </v-chip>
        </v-col>
      </v-row>
      <!--      搜索历史部分-->
      <v-row class="mt-1">
        <v-col cols="auto">
          <span class="text-subtitle-2">搜索历史</span>
        </v-col>
        <v-col cols="auto" class="ml-auto">
          <v-icon size="20" @click="cleanHistory">
            mdi-trash-can-outline
          </v-icon>
        </v-col>
      </v-row>
      <v-row justify="start">
        <v-col cols="auto" class="pt-0 pr-0" v-for="his in histories" :key="his">
          <v-chip small @click="searchContent(his)">
            {{his}}
          </v-chip>
        </v-col>
      </v-row>

    </v-container>


<!--    <v-container class="pt-15" v-else>-->
<!--      <v-tabs-->
<!--          v-model="tabModel"-->
<!--          centered-->
<!--          fixed-tabs-->
<!--          color="secondary"-->
<!--      >-->
<!--        <v-tab key="0">-->
<!--          产品-->
<!--        </v-tab>-->
<!--        <v-tab key="1">-->
<!--          文章-->
<!--        </v-tab>-->
<!--        <v-tab key="2">-->
<!--          话题-->
<!--        </v-tab>-->
<!--      </v-tabs>-->
<!--      <v-tabs-items v-model="tabModel">-->
<!--&lt;!&ndash;        产品&ndash;&gt;-->
<!--        <v-tab-item key="0">-->
<!--          <v-list three-line>-->
<!--            <v-list-item v-for="(li,index) in searchResult[0].list" :key="index">-->
<!--              <v-list-item-avatar rounded size="70">-->
<!--                <v-img :src="li.avatar"></v-img>-->
<!--              </v-list-item-avatar>-->

<!--              <v-list-item-content>-->
<!--                <v-list-item-title >{{ li.title }}</v-list-item-title>-->
<!--                <v-list-item-subtitle >{{li.subtitle}}</v-list-item-subtitle>-->
<!--              </v-list-item-content>-->
<!--            </v-list-item>-->
<!--          </v-list>-->
<!--        </v-tab-item>-->
<!--&lt;!&ndash;        文章&ndash;&gt;-->
<!--        <v-tab-item key="1">-->
<!--          <v-list three-line>-->
<!--            <v-list-item v-for="(li,index) in searchResult[1].list" :key="index">-->
<!--              <v-list-item-avatar rounded size="70">-->
<!--                <v-img :src="li.avatar"></v-img>-->
<!--              </v-list-item-avatar>-->

<!--              <v-list-item-content>-->
<!--                <v-list-item-title >{{ li.title }}</v-list-item-title>-->
<!--                <v-list-item-subtitle >{{li.subtitle}}</v-list-item-subtitle>-->
<!--              </v-list-item-content>-->
<!--            </v-list-item>-->
<!--          </v-list>-->
<!--        </v-tab-item>-->
<!--&lt;!&ndash;        话题&ndash;&gt;-->
<!--        <v-tab-item key="2">-->
<!--          <v-list three-line>-->
<!--            <v-list-item v-for="(li,index) in searchResult[2].list" :key="index">-->
<!--              <v-list-item-avatar rounded size="70">-->
<!--                <v-avatar color="secondary" rounded size="70"><span class="white&#45;&#45;text text-h5">{{ li.title }}</span></v-avatar>-->
<!--              </v-list-item-avatar>-->
<!--              <v-list-item-content>-->
<!--                <v-list-item-title >{{ li.title }}</v-list-item-title>-->
<!--                <v-list-item-subtitle >{{li.subtitle}}</v-list-item-subtitle>-->
<!--              </v-list-item-content>-->
<!--            </v-list-item>-->
<!--          </v-list>-->
<!--        </v-tab-item>-->


<!--      </v-tabs-items>-->

<!--    </v-container>-->

  </v-main>
</template>

<script>
export default {
  name: "Search",
  data: () => ({
    tabModel:0,
    recommendKeyword:'搜点什么',
    keyword:'',
    histories:[],
    hotSearchTags:['你好','李焕英'],

  }),
  methods:{
    searchContent(p){
      this.keyword = p
    },
    loadHistory(){
      let str = window.localStorage.getItem("histories")||""
      // 去除空字符
      this.histories = str.split("|").filter(a=>!!a)
    },
    dumpHistory(){
      let str = this.histories.join("|")
      window.localStorage.setItem("histories",str)
    },
    doSearch(){
      if (this.histories.indexOf(this.keyword)>-1){
        this.histories.splice(this.histories.indexOf(this.keyword),1)
      }
      this.histories.splice(0,0,this.keyword)
      this.dumpHistory()
      this.$router.replace("/home/discover?keyword="+this.keyword)
    },
    cleanHistory(){
      this.histories = []
      window.localStorage.setItem("histories",'')
    },

    // todo 从后端获取热门搜索关键字
    getHotSearchTag(){

    }
  },
  beforeMount() {
    // 读取历史记录
    this.loadHistory()
    // 从query中获得关键词
    if (this.$route.query.keyword){
      this.keyword = this.$route.query.keyword
    }

  }
}
</script>

<style scoped>

</style>

